<template>
  <div class="container">
    <!-- 头部 -->
    <div class="search-header">
      <i class="iconfont iconjiantou2" @click="toBack"></i>

      <div class="search-input">
        <i class="iconfont iconsearch"></i>
        <input v-model="searchText" type="text" placeholder="搜索新闻">
      </div>

      <div class="search-btn" @click="getPostList" >搜索</div>
    </div>

    <div v-if="posts.length>0">
      <van-list
        v-model="loading"
        :immediate-check="false"
        :finished="finished"
        finished-text="没有更多了"
        @load="LoadMorePost"
      >
        <post v-for="(post,index) in posts" :key="index" :item="post" />
      </van-list>
      
    </div>

    <div class="suggestion" v-else>
      <div class="history">
        <h2>历史记录</h2>
        <span @click="searchItem(item)" v-for="(item,index) in historyList" :key="index">{{item}}</span>
      </div>
      <!-- <div class="hot">
        <h2>热门搜索</h2>
        <p @click="searchItem(item)" v-for="(item,index) in hotList" :key="index">{{item}}</p>
      </div> -->
    </div>
  </div>
</template>

<script>
import post from '../components/post';

export default {
  components: {post},
  data() {
    return {
      searchText: '',   //搜索关键字
      // hotList: [],    //热门搜索
      historyList: JSON.parse(localStorage.getItem('history')) || [],   //历史搜索
      posts: [],     //搜索结果文章
      finished: false,
      loading: false, //底部加载中提示
      currentPage: 1
    }
  },
  watch: {
    searchText(){
      this.posts=!this.searchText && []
      // if(!this.searchText) this.posts=[]
    },
    historyList(){
      //把历史记录存储到本地
      localStorage.setItem('history',JSON.stringify(this.historyList))
    }
  },
  methods: {
    //搜索方法
    searchItem(item){
      this.searchText=item;
      this.getPostList();
    },
    //获取文章数据列表
    async getPostList() {
      //要发送请求的参数
      const params = {
        title: this.searchText,
        page: this.currentPage,
      };
      // 发送请求，获取文章数据列表
      const {data: res} = await this.$api.getNews(params)
       // 给对应的分类标签添加文章数据 , 新旧数据合并
      this.posts = [
        ...this.posts,
        ...res.data
      ];

      if(this.posts.length == 0) this.$toast.fail('没有您想搜索内容，请重新输入');

      // 数据加载完，关闭底部加载中提示
      this.loading = false;

      //判断数据是否加载完毕
      this.finished = res.current_page >= res.last_page && true;

      //判断搜索内容是否存在历史记录中，没有则添加到历史记录
      !this.historyList.includes(this.searchText) && this.historyList.push(this.searchText)
    },
    //加载更多数据
    LoadMorePost() {
      // 设置延时
      let timer = setTimeout(() => {
        //清除延时
        clearTimeout(timer);

        //当前页面+1
        this.currentPage++;

        //调用获取文章数据列表方法
        this.getPostList();
      }, 1000);
    },
    toBack(){
      this.searchText?this.searchText='':this.$router.back()
    }
  },
}
</script>

<style lang="less" scoped>
  .container{
    .search-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2.778vw 5.556vw 2.778vw 3vw;

      .iconjiantou2{
        font-size: 4.444vw;
      }

      .search-input{  
        flex: 1;
        height: 11.111vw;
        padding-left: 5.556vw;
        margin: 0 2.778vw;
        border: 1px solid #ddd;
        line-height: 11.111vw;
        border-radius: 5.556vw;
        text-align: left;

        input{
          width: 85%;
          height: auto;
          font-size: 3.889vw;
          outline: 0;
          border: none;
          background: none;
        }
      }

    }

    .suggestion{
      padding: 0 5.556vw;

      .history,.hot{
        padding: 5.556vw 0;
      }
      .history{
        // border-bottom: 1px solid #eee;

        h2{
          padding-bottom: 5.556vw;
        }

        span{
          margin-right: 2.778vw;
        }
      }
      h2{
        font-size: 4.444vw;
      }
      p{
        margin-top: 2.778vw;
        font-size: 3.889vw;
      }
    }
  }
</style>